<template>
    <!-- 基本信息 -->
    <div class="base-info">
        <!-- 修改头像组件 -->
        <UploadAvatar />
        <div class="base-info-form">
            <el-form :model="form.formData" class="demo-form-inline">
                <el-form-item label="昵称">
                    <el-input
                        v-model="form.formData.nickname"
                        placeholder="请输入您的昵称"
                        style="width: 420px"
                    />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.formData.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="0">未知</el-radio>
                    </el-radio-group></el-form-item
                >
                <el-form-item label="生日">
                    <el-date-picker
                        v-model="form.formData.birthday"
                        placeholder="点击确定您的生日"
                        size="default"
                        format="YYYY/MM/DD"
                        value-format="x"
                        style="width: 420px"
                /></el-form-item>
                <el-form-item label="城市"
                    ><Address @change="change" />
                </el-form-item>
                <el-form-item label="职业"
                    ><el-select
                        v-model="form.formData.occupation"
                        placeholder="请选择您的职业"
                        style="width: 420px"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#da9233" @click="onSubmit"
                        >修改</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import UploadAvatar from './upload-avatar.vue'
import { userStore } from '@/stores/user'
import { reactive, computed } from 'vue'
import { options } from '@/utils/constants'
import { updateUserInfo } from '@/apis/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const useUserStore = userStore()
let profile = computed(() => useUserStore.profile)
const form = reactive({
    // 表单数据
    formData: {
        id: profile.value.id,
        nickname: profile.value.nickname,
        gender: profile.value.gender,
        birthday: profile.value.birthday,
        city: JSON.stringify(profile.value.city),
        occupation: profile.value.occupation,
    },
})
const change = data => {
    form.formData.city = JSON.stringify(data)
}
const onSubmit = () => {
    // 提交更新数据
    updateUserInfo(form.formData)
        .then(res => {
            res.city = JSON.parse(res.city.replace(/\\/, ''))
            useUserStore.updateUser(res)
            ElMessage.success('修改成功!')
            useUserStore.updateUser(res)
        })
        .catch(err => {
            if (
                err.response.data.code == 0 &&
                err.response.data.message == 'The token is expired.'
            ) {
                ElMessage.error('token失效，请重新登录')
                useUserStore.setUser({})
                router.push('/login')
                return
            }
            ElMessage.error('修改失败!')
        })
}
</script>

<style lang="scss" scoped>
.base-info {
    width: 100%;
    height: 600px;
    --el-color-primary: #da9233;
    .base-info-form {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-form-item {
            width: 500px;
            margin-top: 20px;
            button {
                border-radius: 0%;
                width: 150px;
                transform: translateX(176px);
            }
        }
    }
}
</style>
